<script setup lang="ts">
import More from '@/components/more/more.vue'
import { ISubCategory } from '@/service/api/type/category.type'
import CategoryItem from '@/view/category/components/category-item.vue'

const props = withDefaults(
  defineProps<{
    subCategory: ISubCategory
  }>(),
  {}
)
</script>

<template>
  <div class="category-panel">
    <div class="head">
      <h3>- {{ subCategory.name }} -</h3>
      <More class="more" path="/"></More>
    </div>
    <div class="body">
      <CategoryItem
        v-for="goods in subCategory.goods"
        :good="goods"
        :key="goods.id"
      ></CategoryItem>
    </div>
  </div>
</template>

<style lang="less" scoped>
.category-panel {
  background-color: #fff;
  margin-top: 20px;
  position: relative;
  .head {
    font-size: 28px;
    color: #666;
    font-weight: 400;
    text-align: center;
    line-height: 100px;
    .more {
      position: absolute;
      top: 20px;
      right: 20px;
    }
  }
  .body {
    display: flex;
    justify-content: flex-start;
    flex-wrap: wrap;
    padding: 0 65px 30px;
  }
}
</style>
